<!DOCTYPE html>
<html>

<head>
    <#import "../common/common.macro.ftl" as netCommon>
        <title>艺术上海 - 艺术视野</title>
        <meta charset="utf-8" />
        <meta name="keywords" content="艺术博览会,艺术展,艺术平台,艺术家,大型国企艺术品电商平台,艺术上海国际博览会,ART PLUS SHANGHAI" />
        <meta name="description" content="大型国企艺术品电商平台,艺术上海国际博览会" />
        <meta name="renderer" content="webkit" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <link href="/static/css/bootstrap.mini.css" rel="stylesheet" />
        <link href="/static/css/style.css" rel="stylesheet" />
        <link href="/static/css/font-face.css" rel="stylesheet" />
        <link href="/static/css/common/index.css" rel="stylesheet" />
        <link href="/static/css/footer/index.css" rel="stylesheet" />
        <link href="/static/css/font/font-awesome.min.css" rel="stylesheet" />
        <link href="/static/css/font-awesome.min.css" rel="stylesheet" type="text/css">
        <link rel="icon" type="image/png" href="/static/img/icon.png" />
        <style>
            .news-box-right h4 {
                margin-bottom: 20px;
            }

            .news-box-right .Context p {
                line-height: 40px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                word-break: break-all;
            }

            .news-box {
                width: 1200px;
                margin: 0 auto;
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
            }

            .news-box-left {
                width: 750px;
                padding: 20px;
                background: #FFF;
            }

            .news-box-right {
                width: 410px;
            }

            .news-item {
                /* margin: 10px;
            border-bottom: 1px #eee solid;
            margin-bottom: 40px; */
                margin: 10px;
                border-bottom: 1px #eee solid;
                margin-bottom: 40px;
                display: flex;
                flex-wrap: nowrap;
                align-content: flex-start;
                justify-content: flex-start;

            }

            .news-item-contents {
                flex: 1;
            }

            .news-item img {
                width: 100%;
                height: 300px;
                object-fit: cover;
            }

            .news-item-tips {
                width: 140px;
                margin-right: 20px;
            }

            .news-item-tips-box {
                width: 120px;
                padding: 10px;
                text-align: center;
                font-weight: bold;
                font-size: 16px;
                margin-bottom: 14px;
            }

            .news-item-tips-box-year {
                font-size: 42px;
            }

            .news-item-tips-box-year-box {
                display: inline-block;
                width: 100%;
            }

            .news-item-tips-box-year-box-item {
                text-align: center;
                float: left;
                height: 30px;
                width: 48%;
                line-height: 30px;
                box-shadow: 0px 0px 3px #eee;
            }
            }

            .news-info {
                padding: 20px 0px;

            }

            .news-info h3 {
                font-size: 22px;
                color: #333;
                line-height: 30px;
            }

            }

            .paging a span {
                display: inline-block;
                width: 81px;
                background-color: #fff;
                height: 50px;
                text-align: center;
                line-height: 50px;
                font-size: 20px;
                cursor: pointer
            }

            .paging a span:hover {
                background-color: #ccc
            }

            .paging a span+span {
                margin-left: 1px
            }

            .paging a span.current {
                background-color: rgb(255, 90, 95);
                color: #fff
            }

            .paging b {
                display: inline-block;
                width: 86px;
                text-align: center;
                font-size: 15px
            }

            .news-box-right-box {
                background: #fff;
                padding: 20px;
                margin-bottom: 20px;
            }

            .news-box-right .news-box-right-box .Context p span {
                padding: 0px 10px;
                background: #ac2925;
                color: #fff;
                margin-right: 10px;
                border-radius: 4px;
            }


            .paging>a.nextPage {
                text-decoration: none;
                color: #fff;
                background-color: rgb(255, 90, 95);
                text-align: center;
                line-height: 50px;
                width: 580px;
                font-size: 20px;
                display: inline-block;
                float: right;
                margin-right: 20px
            }
        </style>
</head>

<body>

    <@netCommon.commonHeader "艺术资讯" menu i18n />

    <section style="padding-top: 140px; background: #f2f2f2; ">
        <div class="news-box">

        <div class="">

        </div>
            <div class="news-box-left">
                   <#list categoryList.data as items>
                             <a href="/news/index?page=1&sort=1">${items.title}</a> |
                      </#list>
                <#list data.data.records as items>
                    <div class="news-item">
                        <div class="news-item-tips">
                            <div class="news-item-tips-box">
                                <div class="news-item-tips-box-year">${items.edt?substring(0,4)}</div>
                                <div class="news-item-tips-box-year-box">
                                    <div class="news-item-tips-box-year-box-item">${items.edt?substring(5,7)}</div>
                                    <div class="news-item-tips-box-year-box-item">${items.edt?substring(8,11)}</div>
                                </div>
                            </div>
                            <#list items.categoryObjs as items>
                            <a href="/news/index?categoryId=${items.id}" style="margin-left: 10px">
                               #${items.title}
                              </a>
                              <br>
                            </#list>
                        </div>
                        <div class="news-item-contents">
                             <#if items.remarks?? && items.remarks!=''>
                                <a href="${items.remarks}" target="_blank">
                                                                <img src="${items.thumbnail}" />
                                 </a>
                                <#else>
                                <a href="/news/detail?newsNo=${items.articleRelNo}" target="_blank">
                                                                <img src="${items.thumbnail}" />
                                  </a>
                             </#if>

                            <div class="news-info">
                                <h3><a href="/news/detail?newsNo=${items.articleRelNo}"
                                        target="_blank">${items.title}</a>
                                </h3>
                                <p><a href="/news/detail?newsNo=${items.articleRelNo}"
                                        target="_blank"></a></p>
                            </div>
                        </div>

                    </div>
                </#list>
            </div>
            <div class="news-box-right">
                    <#list categoryList.data as items>
                       <div class="news-box-right-box">
                           <h4>${items.title}</h4>
                           <ul>
                               <li>
                                   <div class="Context">
                                       <#list list.data.records as items>
                                           <p>
                                               <span> ${items_index+1}</span>
                                               <a href="/news/detail?newsNo=${items.articleRelNo}"
                                                   target="_blank">${items.title}</a>
                                           </p>
                                       </#list>
                                   </div>
                               </li>

                           </ul>
                           <a href="/news/index?page=1&sort=1" style="margin-top: 20px">
                               查看更多
                           </a>
                       </div>
                       </#list>

            </div>
        </div>
        <div style="padding: 10px;width: 1200px; padding-bottom: 80px; margin: 0px auto">
            <p class="paging">
                <#-- <#if (list.data.pages> 3)>-->
                    <#-- <#list 1..3 as item>-->
                        <#-- <a href="/news/index?page=${item}"> <span
                                class="<#if item == list.data.current>current</#if>">
                                ${item}</span></a>-->
                            <#-- </#list>-->
                                <#-- </#if>-->

                                    <#if (data.data.current <data.data.pages)>
                                        <a href="/news/index?page=${data.data.current+1}"
                                            class="nextPage"
                                            style="float:left;width: 120px; margin-bottom: 10px">下一页</a>
                                    </#if>
            </p>
        </div>
    </section>


    <@netCommon.commonFooter footer friendLink copyright i18n />

</body>


<@netCommon.commonScript />

</html>
